<template>
  <v-ons-page>
    <v-ons-splitter>


      <v-ons-splitter-side swipeable collapse width="200px"
        side="left"
        
        :open.sync="menuIsOpen">

          
          <menus
            :page-stack="pageStack"
            :set-tabbar-index="setTabbarIndex"
            :set-menu-is-open="setMenuIsOpen"
          ></menus> 

      </v-ons-splitter-side>


      <v-ons-splitter-content>

          
          <tabbar
            :page-stack="pageStack"
            :set-tabbar-index="setTabbarIndex"
            :set-menu-is-open="setMenuIsOpen"
          ></tabbar> 

      </v-ons-splitter-content>

    </v-ons-splitter>
  </v-ons-page>
</template>



<script>
import Tabbar from './components/tabbar/Tabbar';
import Menus from './components/menu/Menus';

export default {
    name: 'appPage',
    props: ['pageStack'],
    components: { Tabbar, Menus },

    data () {
      return {
        menuIsOpen: false
      }
    },



    methods: {

      setMenuIsOpen() {
        this.menuIsOpen = !this.menuIsOpen;
      },

      setTabbarIndex(newValue) {
        if (newValue !== undefined) {
          this.tabbarIndex = newValue;
        }
        return this.tabbarIndex;
      }
    }

  
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ons-splitter-side[side=left][animation=overlay] {
  border-right: 1px solid #BBB;
}
</style>
